import React, { memo, useEffect } from "react";
import "./index.scss";
// 声明 百度全局 变量
declare const AMap: any;

const Map = memo(() => {
  const initMap = () => {
    // 创建地图实例
    let map = new AMap.Map("map", {
      center: [118.248352, 24.799081], // 设置地图中心点经纬度
      zoom: 15, // 设置地图缩放级别
    });

    // 添加标记
    let marker = new AMap.Marker({
      position: new AMap.LngLat(118.248352, 24.799081),
      title: "北辰山风景区",
    });
    marker.setMap(map);

    // 添加信息窗口
    let infoWindow = new AMap.InfoWindow({
      content: "欢迎来到厦门北辰山风景区",
      offset: new AMap.Pixel(0, -30),
    });
    marker.on("click", function () {
      infoWindow.open(map, marker.getPosition());
    });

    //步行导航
    let walking = new AMap.Walking({
      map: map,
      panel: "panel",
    });
    //根据起终点坐标规划步行路线
    walking.search(
      [118.248352, 24.799081],
      [118.288352, 24.839081],
      (status: any, result: any) => {
        // result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
        if (status === "complete") {
          console.log("绘制步行路线完成");
        } else {
          console.log("步行路线数据查询失败" + result);
        }
      }
    );
  };
  useEffect(() => {
    initMap();
  }, []);
  return (
    <>
      <div id="map"></div>
      <div id="panel"></div>
    </>
  );
});

export default Map;
